<template>
  <div @click="close">
    <!-- <div class="alertDiv" v-show="toPayMoney" @click="hidetoPayMoney">
      <div class="payType" @click.stop="nothing()">
        <div class="title">
          <span @click="hidetoPayMoney()">取消</span>
          确认付款
        </div>
        <div class="oneChoice" @click="choiceType('aliPay')">
          <img class="iconPic" src="@assets/images/alipay_icon.png" alt="">
          <div class="right right1" >
            <span>支付宝支付</span>
            <img class="choice" v-if="active == 'aliPay'" src="@assets/images/choice.png" alt="">
            <img class="choice" v-if="active == 'weChatPay'" src="@assets/images/choice1.png" alt="">
          </div>
        </div>
        <div class="oneChoice" @click="choiceType('weChatPay')">
          <img class="iconPic" src="@assets/images/wechatpay_icon.png" alt="">
          <div class="right">
            <span>微信支付</span>
            <img class="choice" v-if="active == 'aliPay'" src="@assets/images/choice1.png" alt="">
            <img class="choice" v-if="active == 'weChatPay'" src="@assets/images/choice.png" alt="">
          </div>
        </div>
        <div class="payMoney" @click="createOrder">立即付款</div>
      </div>
    </div>-->
    <div class="payment" :class="value === true ? 'on' : ''" @click.stop="nothing()">
      <div class="title acea-row row-center-wrapper">
        <span @click="close()">取消</span>
        确认付款
      </div>
      <!-- @click="checked('weixin')" -->
      <div
        class="item acea-row row-between-wrapper oneChoice"
        @click="choiceType('aliPay')"
        v-show=" this.isWeixin=='0'"
      >
        <!-- <div class="left acea-row row-between-wrapper">
          <div class="iconfont icon-weixinzhifu"></div>
          <div class="text">
            <div class="name">微信支付</div>
            <div class="info">使用微信快捷支付</div>
          </div>
        </div>
        <div class="iconfont icon-xiangyou"></div>-->
        <img class="iconPic" src="@assets/images/alipay_icon.png" alt>
        <div class="right right1">
          <span>支付宝支付</span>
          <img class="choice" v-if="active == 'aliPay'" src="@assets/images/choice.png" alt>
          <img class="choice" v-if="active == 'weChatPay'" src="@assets/images/choice1.png" alt>
        </div>
      </div>
      <!-- @click="checked('alipay')" -->
      <div class="item acea-row row-between-wrapper oneChoice" @click="choiceType('weChatPay')">
        <img class="iconPic" src="@assets/images/wechatpay_icon.png" alt>
        <div class="right">
          <span>微信支付</span>
          <img class="choice" v-if="active == 'aliPay'" src="@assets/images/choice1.png" alt>
          <img class="choice" v-if="active == 'weChatPay'" src="@assets/images/choice.png" alt>
        </div>
      </div>
      <div class="payMoney" @click="checked()">立即付款</div>
    </div>
    <div class="mask" v-show="value" @click="close"></div>
  </div>
</template>
<script>
import { isWeixin } from "@utils";
// import cookie from "@utils/store/cookie";
import cookie from 'js-cookie'
export default {
  name: "Payment",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    balance: {
      type: [Number, String],
      default: 0
    },
    types: {
      type: Array,
      default: () => ["weixin", "alipay", "yue", "offline"]
    }
  },
  data: function() {
    return {
      active: "aliPay",
      isWeixin: "0",
      from1: ""
    };
  },
  created() {
  },
  mounted: function() {
    this.from1 = cookie.get('from1');
    if (this.from1 == "app") {
      this.isWeixin = "0";
    } else {
      this.isWeixin = "1";
      this.active = "weChatPay";
    }
  },
  methods: {
    checked: function() {
      this.$emit("checked", this.active);
      // this.close();
    },
    close: function() {
      this.$emit("input", false);
    },
    nothing: function() {},
    choiceType: function(type) {
      this.active = type;
    }
  }
};
</script>
<style scoped>
.payment {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 0.16rem 0.16rem 0 0;
  background-color: #fff;
  /* padding-bottom: 0.6rem; */
  z-index: 666;
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
}

.payment.on {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}

.title {
  width: 100%;
  text-align: center;
  line-height: 0.44rem;
  font-size: 0.32rem;
  color: rgba(0, 0, 0, 1);
  padding: 0.34rem 0 0.18rem 0;
  text-align: center;
  border-bottom: 0.02rem solid rgba(0, 0, 0, 0.1);
}
.title span {
  position: absolute;
  top: 0.36rem;
  left: 0.32rem;
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.28rem;
}

.payment .title .iconfont {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.43rem;
  color: #8a8a8a;
  font-weight: normal;
}

.payment .item {
  /* border-bottom: 0.01rem solid #eee; */
  height: 1.3rem;
  margin-left: 0.3rem;
  padding-right: 0.3rem;
}

.payment .item .left {
  width: 6.1rem;
}

.payment .item .left .text {
  width: 5.4rem;
}

.payment .item .left .text .name {
  font-size: 0.32rem;
  color: #282828;
}

.payment .item .left .text .info {
  font-size: 0.24rem;
  color: #999;
}

.payment .item .left .text .info .money {
  color: #ff9900;
}

.payment .item .left .iconfont {
  font-size: 0.45rem;
  color: #09bb07;
}

.payment .item .left .iconfont.icon-zhifubao {
  color: #00aaea;
}

.payment .item .left .iconfont.icon-yuezhifu {
  color: #ff9900;
}

.payment .item .left .iconfont.icon-yuezhifu1 {
  color: #eb6623;
}

.payment .item .iconfont {
  font-size: 0.3rem;
  color: #999;
}
.oneChoice {
  padding: 0 0 0 0.3rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oneChoice .right {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
  line-height: 0.4rem;
  padding: 0.4rem 0.3rem 0.4rem 0;
}
.oneChoice .right1 {
  /* border-bottom: 0.02rem solid rgba(0, 0, 0, 0.1); */
}
.oneChoice .iconPic {
  margin: 0.3rem 0.3rem 0.3rem 0;
  width: 0.6rem;
  height: 0.6rem;
}
.oneChoice span {
  flex: 1;
}
.oneChoice .choice {
  width: 0.36rem;
  height: 0.36rem;
}
.payMoney {
  font-size: 0.3rem;
  line-height: 1;
  color: #fff;
  line-height: 1;
  padding: 0.29rem 2.88rem;
  margin: 0.32rem 0.14rem;
  background-color: rgba(255, 50, 62, 1);
  border-radius: 0.16rem;
}
</style>
